<template>
	<div class="header">
		<p class="logo">logo</p>
		<ul class="menu">
			<li :class="[index == currentIndex ? 'current' : '']" v-for="(item, index) in menu" :key="index" @click="go(item.path)">
				<Ellipsis :content="item.meta.title">
					<span>{{ item.meta.title }}</span>
				</Ellipsis>
			</li>
		</ul>
	</div>
</template>

<script setup name="globalHeader">
import { ref, watch } from 'vue';
import router, { menu } from '@/router';
import Ellipsis from '@/components/Ellipsis/index.vue';
const currentIndex = ref(-1);
const go = path => {
	router.push(path);
	light(path);
};
const light = path => {
	console.log(path);
	let index = menu.findIndex(item => {
		let a = item.path.split('/'),
			b = path.split('/');
		return a[1] === b[1];
	});
	currentIndex.value = index;
};
watch(
	() => router.currentRoute.value,
	route => {
		light(route.path);
	},
	{ immediate: true }
);
</script>

<style lang="less" scoped>
.header {
	height: 50px;
	color: #ffff;
	font-weight: bold;
	background: #000;
	display: flex;
	padding: 0 10px;
	align-items: center;
	justify-content: space-between;
	.menu {
		display: flex;
		li {
			margin-right: 10px;
			cursor: pointer;
			&.current {
				color: red;
			}
		}
		span {
			display: block;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			width: 70px;
		}
	}
}
</style>
